@keyframes updateIconIn {
    0% {
        opacity:0;
        transform:translateY(-40%);
    }
    100% {
        opacity:1;
        transform:translateY(-60%);
    }
}

.inline-text-field {
    position: relative;
}

.inline-text-field__edit-icon {
    width:10px;
    position: absolute;
    top:50%;
    right:10px;
    opacity:0;
    transition:opacity 500ms cubic-bezier(0.19, 1, 0.22, 1),
    transform 1000ms cubic-bezier(0.19, 1, 0.22, 1);
    transform:translateY(-40%);

    @at-root .inline-text-field:hover #{&} {
        opacity:1;
        transform:translateY(-60%);
    }
}

.inline-text-field__input {
    border:1px solid rgba(#229EDA,0);
    border-radius:2px;
    padding:12px 10px;
    font-family:"Proxima Nova", Helvetica, sans-serif;
    width:100%;
    display:block;
    background:transparent;
}

.inline-text-field__input--active {
    border-color:#229EDA;
    background:#fff;
}

.inline-text-field__text {
    padding:12px 10px;
}

.inline-text-field__update-icon {
    width:10px;
    position: absolute;
    top:50%;
    right:10px;
    opacity:0;
    transform:translateY(-40%);
    animation:updateIconIn 1400ms cubic-bezier(0.19, 1, 0.22, 1) forwards;
}